<template>
	<view>
		<view class="job-dtl-box">
			<view class="common-tips-box">
				<view class="t1">职位发布</view>
				<view class="t2">职位名称、公司信息等发布后不可修改</view>
			</view>
			<view class="dtl-box">
				<view class="job-box">
					<view class="tit">职位类型</view>
					<view class="dtl-item-box">
						<view :class="{'for-item': true, 'curr': detail.type == '1'}" data-val="1" data-key="type" @click="checkBoxFn">全职</view>
						<view :class="{'for-item': true, 'curr' :detail.type == '3'}" data-val="3" data-key="type" @click="checkBoxFn">汽修兼职</view>
						<view :class="{'for-item': true, 'curr' :detail.type == '2'}" data-val="2" data-key="type" @click="checkBoxFn">其他兼职</view>
					</view>
				</view>
				<view class="job-box hidden-border">
					<view class="tit">我要招聘</view>
					<view class="dtl-list-box">
						<navigator hover-class="hoverClass2" url="/pages/recruit/position-model/index">
							<view :class="{'tips-txt': !detail.position}">
								{{ detail.position || '请选择职位名称'}}
								<text class="iconfontPT iconxiayibu pull-right"></text>
							</view>
						</navigator>
						<picker @change="bindSalaryChange" :value="index" :range="educationList">
							<view :class="{'picker': true, 'tips-txt': !detail.education}">
								{{detail.education || '请选择学历要求'}}
								<text class="iconfontPT iconxiayibu pull-right"></text>
							</view>
						</picker>
						<picker v-if="detail.type == '1'" mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"
						 :value="multiIndex" :range="multiArray">
							<view :class="{'picker': true, 'tips-txt': !detail.salary}">
								{{ detail.salary || '请选择薪资范围' }}
								<text class="iconfontPT iconxiayibu pull-right"></text>
							</view>
						</picker>
						<view class="picker-salary" v-else>
							<view class="picker">
								<input placeholder="请输入薪资情况" placeholder-class="tips-txt" v-model="detail.salary"></input>
							</view>
						</view>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">职位要求</view>
					<view class="dtl-list-box">
						<navigator hover-class="hoverClass2" data-key="jobDemand" @click="handleSendText" url="/pages/recruit/edit-self-ev/index?type=jobDemand">
							<view :class="{'tips-txt': !jobDemand}">
								<view class="txtHidden txt-view">
									{{ jobDemand || '请填写职位要求'}}
								</view>
								<text class="iconfontPT iconxiayibu pull-right"></text>
							</view>
						</navigator>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">经验要求</view>
					<view class="dtl-item-box">
						<view v-for="(item, index) in experienceList" :key="index" @click="checkBoxFn" :data-val="item" data-key="experience"
						 :class="{'for-item': true, 'curr': detail.experience == item}">{{item}}</view>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">职位关键词</view>
					<view class="dtl-list-box">
						<navigator class="hidden-border" hover-class="hoverClass2" data-key="skillData" @click="handleSendText" url="/pages/recruit/edit-skill-label/index">
							<view :class="{'tips-txt': !skillData}">
								<view v-for="(item, index) in skillData" :key="index" class="lable-box inline-block">
									<text class="item" v-if="item.value">{{item.value}}</text>
								</view>
								{{ skillData.length <= 0 ? '请填写技能标签' : ''}}
								<text class="iconfontPT iconxiayibu pull-right"></text>
							</view>
						</navigator>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">工作地址</view>
					<view class="dtl-list-box">
						<view class="navigator hidden-border" hover-class="hoverClass2" @click="onChooseLocation">
							<view :class="{'txtHidden txt-view': true, 'tips-txt': !detail.company_address}">
								{{ detail.company_address || '请选择地址'}}
							</view>
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<btnTpl v-if="detail.state == 0" cancel="true" @confirmEvent="submitEventFn" @cancelEvent="cancelEvent">
			<view slot="cancel">
				关闭职位
			</view>
			保存职位
		</btnTpl>
		<btnTpl v-else @confirmEvent="submitEventFn">
			{{detail.state == 1 ? '重新发布' : '发布职位'}}
		</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getPositionDetail,
		setReleaseInfo,setpositinEatiot,
		updateReleaseInfo,
		setPositionStateDetail
	} from '../../../apis/recruit/index.js'
	import location from '../../../utils/location.js'

	export default {
		data() {
			return {
				id: '',
				jobDemand: '',
				skillData: [],
				multiIndex: [0, 0],
				multiArray: [],
				educationList: ['初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士'],
				mapAddress: [],
				educationIndex: '',
				experienceList: ['1-3年', '3-5年', '5年以上', '不限'],
				detail: {
					"type": "1", //岗位类型 1全职 2兼职
					"position": "", //岗位名称
					"education": "", //学历范围
					"s_salary": "", //薪资范围起
					"e_salary": "", //薪资范围终
					"salary": '', //薪资范围拼接
					"experience": "不限", //经验要求
					"requirement": "", //岗位要求
					"company_address": "", //公司办公地址
					"key_word": "", //岗位关键词，需要用英文逗号拼接
					"city": "", //市
					"area": "", //区
					"street": "", //街道
					"longitude": "", //经度
					"dimension": "", //维度
				},
				rules: {
					position: [{
						required: true,
						message: '请选择职位名称',
					}],
					education: [{
						required: true,
						message: '请选择学历要求',
					}],
					salary: [{
						required: true,
						message: '请选择薪资范围',
					}],
					requirement: [{
						required: true,
						message: '请填写职位要求',
					}],
					key_word: [{
						required: true,
						message: '请至少填写一个职位关键词',
					}],
					company_address: [{
						required: true,
						message: '工作地址为必选',
					}],
				}
			}
		},
		onLoad(options) {
			if (options.id) { //编辑
				this.id = options.id
				this.initDataFn();
			}
		},
		onShow() {
			if (!this.detail.salary) {
				let list = []
				for (let i = 1; i <= 30; i++) {
					list.push(`${i}k`)
				}
				this.multiArray = [
					['面议'].concat(list), []
				]
			}
		},
		components: {
			btnTpl
		},
		methods: {
			//初始化获取数据
			initDataFn() {
				let _this = this;
				getPositionDetail({
					id: _this.id
				}).then(res => {
					if (res.code == 1) {
						_this.detail = res.data.post_desc
						_this.jobDemand = res.data.post_desc.requirement

						if (res.data.post_desc.key_word) {
							let keyWord = res.data.post_desc.key_word.split('-`-');

							_this.skillData = keyWord.map((item, index) => ({
								index: index + 1,
								value: item ? item : ''
							}))
						}
					}
				})
			},
			//选择地址
			onChooseLocation() {
				let that = this;
				uni.chooseLocation({
					latitude: that.detail.dimension || '30.645855',
					longitude: that.detail.longitude || '103.983638',
					success: (res) => {
						let regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
						let REGION_PROVINCE = [];
						let addressBean = {
							REGION_PROVINCE: null,
							REGION_COUNTRY: null,
							REGION_CITY: null,
							ADDRESS: null
						};

						const regexAddressBean = (address, addressBean) => {
							regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
							let addxress = regex.exec(address);
							if (!addxress) {
								return;
							}
							addressBean.REGION_CITY = addxress[1];
							addressBean.REGION_COUNTRY = addxress[2];
							addressBean.ADDRESS = addxress[3] + "(" + res.name + ")";
							that.detail.city = addxress[1]
							that.detail.area = addxress[2]
							that.detail.longitude = res.longitude
							that.detail.dimension = res.latitude
							that.detail.company_address = res.address

							that.getStreetDtlFn()
						}
						if (!(REGION_PROVINCE = regex.exec(res.address))) {
							regex = /^(.*?(省|自治区))(.*?)$/;
							REGION_PROVINCE = regex.exec(res.address);
							addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
							regexAddressBean(REGION_PROVINCE[3], addressBean);
						} else {
							addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
							regexAddressBean(res.address, addressBean);
						}
					}
				});
			},
			//根据定位获取街道
			getStreetDtlFn() {
				let that = this;
				location(that.detail.dimension, that.detail.longitude)
					.then(res => {
						that.detail.street = res.data.result.address_reference.town.title
					})
			},
			//学历选择
			bindSalaryChange(e) {
				let _this = this;
				this.educationIndex = e.detail.value
				this.detail.education = _this.educationList[e.detail.value]
			},

			//发布职位信息
			submitEventFn() {
				let _this = this,
				params = _this.detail;
				params.requirement = _this.jobDemand
				params.key_word = _this.skillData.map(item => item.value).join('-`-');

				if (params.type != '1') {
					delete params.s_salary
					delete params.e_salary
				}

				this.$verification(params, _this.rules, ok => {
					if (ok) {
						let api = setReleaseInfo
						if (_this.id) {
							api = setpositinEatiot
							params.id = _this.id;
						}
						// setPositionStateDetail
						api(params).then(res => {
							if (res.code == 1) {
								uni.showToast({
									title: '发布职位成功',
									icon: 'success'
								})
								if (_this.id) {
									uni.navigateBack({
										delta: 1,
									})
								} else {
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/recruit/job-manage/index',
										})
									}, 1500);
								}
							}
						})
					}
				})
			},
			//绑定薪资选择
			bindMultiPickerChange(e) {
				let multiArray = this.multiArray,
					value = e.detail.value,
					$v = multiArray[0][value[0]],
					k1 = value[0] != 0 ? $v.substr(0, $v.length - 1) : $v,
					k2 = multiArray[1][value[1]] || '';

				this.detail.salary = k1 + (k2 ? '-' + k2 : '')

				this.detail.s_salary = k1
				this.detail.e_salary = k2.replace('k', '')
			},
			bindMultiPickerColumnChange(e) {
				let _this = this,
					{
						column,
						value
					} = e.detail,
					multiIndex = _this.multiIndex,
					multiArray = _this.multiArray;

				multiIndex[column] = value;

				multiArray[1] = column == 0 && value == 0 ? [] :
					column == 0 && _this.multiArray[0].slice(value + 1)
				this.multiIndex = multiIndex
				// this.multiArray = multiArray
				// this.$set(this.multiIndex, multiIndex)
				this.$set(this.multiArray, multiArray)
			},
			checkBoxFn(e) {
				let _this = this,
					value = e.currentTarget.dataset.val,
					key = e.currentTarget.dataset.key;
				_this.detail[key] = value
			},
			handleSendText(e) {
				let _this = this,
					result = [],
					key = e.currentTarget.dataset.key;
				if (key === 'skillData') {
					for (let i = 0; i < 3; i++) {
						result.push({
							index: _this.skillData[i] ? _this.skillData[i].index : i + 1,
							value: _this.skillData[i] ? _this.skillData[i].value : ''
						})
					}
					uni.setStorageSync(key, result)
					return
				}

				uni.setStorageSync(key, _this[key])
			},
			cancelEvent() {
				let _this = this;
				let params = {
					id: _this.id,
					state: _this.detail.state == 0 ? 1 : 0
				};
				setPositionStateDetail(params).then(res => {
					if (res.code == 1) {
						let txt = params.state == 1 ? '职位关闭成功' : '职位开启成功';
						uni.showToast({
							title:'操作成功',
							icon:'success'
						})
 						setTimeout(() => {
							uni.redirectTo({
								url: '../../pages/job-manage/job-manage',
							})
						}, 1500);
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.job-dtl-box {
		padding: 0 30rpx 210rpx;

		.tips-txt {
			color: #989898;
		}

		.dtl-box {
			margin-top: 22rpx;
		}

		.job-box {
			padding: 60rpx 0 0;
			box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;

			.tit {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;
			}

			picker {
				font-size: 30rpx;
				line-height: 30rpx;
				padding-top: 18rpx;
				padding-bottom: 38rpx;
			}

			.txt-view {
				display: inline-block;
				width: 90%;
			}
		}

		/* .job-box navigator, */
		.hidden-border {
			border-top: none !important;
			border-bottom: none !important;
		}

		.iconxiayibu {
			font-size: 24rpx;
			color: #999;
		}

		.dtl-item-box {
			font-size: 30rpx;
			line-height: 30rpx;
			padding-top: 40rpx;
			padding-bottom: 10rpx;
		}

		.for-item {
			padding: 14rpx 34rpx;
			color: #333;
			border: 1rpx solid #F1F1F1;
			border-radius: 5rpx;
			display: inline-block;
			margin-right: 30rpx;
			font-size: 24rpx;

			&.curr {
				background: #FFD5D1;
				border-color: #FFD5D1;
				color: #E41805;
			}
		}

		.dtl-list-box {
			padding: 10rpx 0 0;

			navigator,
			.navigator,
			picker {
				padding: 50rpx 0 20rpx;
				border-bottom: 1rpx solid #F1F1F1;
				font-size: 28rpx;
				line-height: 28rpx;
			}

			.picker-salary {
				padding: 40rpx 0 15rpx;
				border-bottom: 1rpx solid #F1F1F1;
				font-size: 28rpx;
			}
		}

		.lable-box {
			.item {
				background: #FFD5D1;
				border-color: #FFD5D1;
				color: #E41805;
				padding: 6rpx 14rpx;
				border: 1rpx solid #F1F1F1;
				border-radius: 5rpx;
				display: inline-block;
				margin: 0 10rpx 10rpx 0;
				font-size: 24rpx;
			}
		}
	}
</style>
